<!--
 * @Author: 宋杰
 * @Date: 2021-01-24 22:50:30
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-17 00:25:31
 * @Description: 一家十一口(猜一字)
-->
<template>
  <div class="divBox">
    <div class="titleBox">
      <div>TPM分布</div>
    </div>
    <div>
      <div ref="leftBox" style="width:100%; height: 100%;"></div>
    </div>
  </div>
</template>

<script>
//import {} from '';
export default {
  name: "",
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts
      // let t = this;
      var myChart = this.$echarts.init(this.$refs.leftBox);
      myChart.setOption({
        title: {
          text: "",
          subtext: "",
          left: "",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        // legend: {
        //   left: "center",
        //   top: "bottom",
        //   data: [
        //     "rose1",
        //     "rose2",
        //     "rose3",
        //     "rose4",
        //     "rose5",
        //     "rose6",
        //     "rose7",
        //     "rose8",
        //   ],
        // },
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ["pie", "funnel"],
            },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["30%", "50%"],
            // center: "60%",
            roseType: "area",
            data: [
              {
                value: 47,
                name: "风控47%",
                itemStyle: { color: "#F44765" },
                label: {
                  fontSize: 15,
                },
              },
              {
                value: 24,
                name: "渠道24%",
                itemStyle: {
                  color: "#4367E1",
                },
                label: {
                  fontSize: 15,
                },
              },
              {
                value: 32,
                name: "核心32%",
                itemStyle: { color: "#1CD3F3" },
                label: {
                  fontSize: 15,
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.divBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  > :nth-child(2) {
    flex: 1;
    width: 100%;
  }
  // 标题
  .titleBox {
    // border: 1px solid #1cdff5;
    font-family: PingFangSC-Regular;
    font-size: 0.3rem;
    color: #75bdff;
    letter-spacing: 0.015rem;
    text-align: left;
    line-height: 0.5rem;
    height: 0.5rem;
    width: 100%;
    background: url("../../assets/heng2.png") no-repeat;
    background-size: 6rem 40%;
    background-position: left 0 bottom 0;
    margin-bottom: 0.05rem;
    margin-top: 0.2rem;
  }
}
</style>
